<template>
  <wd-form custom-class="custom-form2" ref="form" :model="mode">
    <wd-cell title="民宿名称" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.hotelName"
        prop="hotelName"
        :rules="[{ required: true, message: '请输入民宿名称' }]"
        placeholder="请输入民宿名称"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="店招图片" custom-class="vertical-cell" title-width="150rpx" vertical>
      <ImgUpload
        v-model="mode.imgUrls"
        itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
      />
      <div style="height: 40rpx"></div>
    </wd-cell>
    <wd-cell title="前台图片" custom-class="vertical-cell" title-width="150rpx" vertical>
      <ImgUpload
        v-model="mode.deskImgUrlsList"
        multiple
        :count="20"
        itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
      />
      <div style="height: 40rpx"></div>
    </wd-cell>
    <wd-cell title="地址" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.hotelAddr"
        prop="hotelAddr"
        :rules="[{ required: true, message: '请输入地址' }]"
        placeholder="请输入地址"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="民宿类别" title-width="150rpx">
      <wd-picker
        :columns="classify"
        v-model="mode.classify"
        prop="classify"
        placeholder="请选择民宿类别"
        :rules="[{ required: true, message: '请选择民宿类别' }]"
      />
    </wd-cell>
    <wd-cell title="前台电话" title-width="150rpx">
      <wd-input
        type="number"
        v-model="mode.contactPhone"
        prop="contactPhone"
        :rules="[{ required: true, message: '请输入前台电话' }]"
        placeholder="请输入前台电话"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="客房间数" title-width="150rpx">
      <wd-input
        type="number"
        v-model="mode.roomNumber"
        prop="roomNumber"
        :rules="[{ required: true, message: '请输入客房间数' }]"
        placeholder="请输入客房间数"
        suffix-icon="edit"
      >
        <template #suffix>间</template>
      </wd-input>
    </wd-cell>
    <wd-cell title="开业年月" title-width="150rpx">
      <wd-datetime-picker
        v-model="mode.openingDate"
        placeholder="请选择开业年月"
        prop="openingDate"
        type="year-month"
        :rules="[{ required: true, message: '请选择开业年月' }]"
      />
    </wd-cell>
    <wd-cell title="是否同意接待平台认证的艺术家免费入住？" custom-class="vertical-cell" vertical>
      <div class="tags">
        <div class="tag" :class="{ active: mode.free === 1 }" @click="mode.free = 1">是</div>
        <div class="tag" :class="{ active: mode.free === 0 }" @click="mode.free = 0">否</div>
      </div>
    </wd-cell>
  </wd-form>
</template>
<script lang="ts" setup>
import { getDict, msgNone } from '@/utils/index'

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
defineOptions({ name: 'HotelStep1' })

// 获取字典
const classify = ref<any>([])
getDict('homestay_classify').then((res: any) => {
  classify.value = res.map((item: any) => {
    return {
      label: item.dictValue,
      value: item.dictKey,
    }
  })
})

const mode = reactive({
  hotelName: '',
  imgUrls: '',
  deskImgUrlsList: [],
  deskImgUrls: '',
  hotelAddr: '',
  classify: '',
  contactPhone: '',
  roomNumber: '',
  openingDate: '',
  free: 1,
})

watch(
  () => props.data,
  () => {
    Object.assign(mode, props.data)
  },
  {
    immediate: true,
    deep: true,
  },
)

const form = ref()
defineExpose({
  validate() {
    return new Promise((resolve, reject) => {
      form.value.validate().then(({ valid, errors }) => {
        if (valid) {
          mode.deskImgUrls = mode.deskImgUrlsList.join(',')
          resolve(mode)
          // if (mode.avatar) {
          //   resolve(mode)
          // } else {
          //   msgNone('请选择头像')
          // }
        } else {
          reject(errors)
        }
      })
    })
  },
  mode,
})
</script>
<style lang="scss" scoped>
@import url(../style.scss);
</style>
